<template>
    <div>
        <!-- 订单确认页面顶部导航区域 -->
        <nav-comp :back="$route.meta.back" :title="$route.meta.title"></nav-comp>
        <!-- 8. 间隔槽-->
        <gap-comp :height="1"></gap-comp>

        <!-- 收获地址区域 -->
        <!-- 编辑 重新选择收货地址区域 -->
        <van-contact-card v-if="buffer" type="edit" :name="address.username" :tel="address.userphone" @click="onEdit" />
        <!-- 添加收货地址区域 -->
        <van-contact-card v-else type="add" add-text="添加收货地址" @click="onAdd" />

        <!-- 待确认订单列表区域 -->
        <van-card v-for="item in orderData" :key="item.id" :num="item.num" :price="item.price" desc="描述信息"
            :title="item.goodsname" :thumb="$pre + item.img" />
        <!-- 间隔槽区域-->
        <gap-comp :height="50"></gap-comp>

        <!-- 订单提交导航区域 -->
        <van-submit-bar :price="Number(countMoney)" button-text="提交订单" @submit="onSubmit" />

    </div>
</template>

<script>
export default {
    data() {
        return {
            orderData: [],//待确认订单数据
            countMoney: "",//总支付金额
            countNumber: "",//购买商品数量
            buffer: true,//收货地址展示开关
            address: {},//用户的默认收货地址数据
            uid: this.$utils.getUid()//用户的uid
        };
    },
    mounted() {
        // 1.获取缓存中的待确认订单数据
        let { orders, countMoney, countNumber } = JSON.parse(localStorage.getItem('orderData'))
        this.orderData = orders
        this.countMoney = countMoney
        this.countNumber = countNumber

        // 2.获取地址列表页面传递的地址数据
        let address = this.$route.query.address || ""
        if (address != "") {
            let addressData = JSON.parse(address)
            this.address = {
                id: addressData.id,
                username: addressData.name,
                userphone: addressData.tel
            }
        } else {
            // 从购物车过来就根据用户uid获取默认收货地址
            this.getUserAddress()
        }
    },
    methods: {
        // 1.跳转到用户收货地址添加页面
        onAdd() {
            this.$router.push("/addressadd")
        },
        // 2.提交订单
        onSubmit() {

        },

        // 3.获取用户收获的地址
        getUserAddress() {
            this.$api.reqGetAddress({ uid: this.uid, status: 1 })
                .then(res => {
                    if (res == null) {
                        this.buffer = false
                    } else {
                        this.buffer = true
                        this.address = res[0]
                    }
                })
                .catch(err => console.log(err))
        },

        // 4.切换用户收货地址
        onEdit() {
            this.$router.push('/addresslist?addressId=' + this.address.id)
        }
    },
};
</script>

<style scoped></style>
